<template>
  <section class="page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <section v-if="info">
            <div class="account-center-avatarHolder">
              <div class="avatar">
                <img :src="info.commercialImage||'/logo.png'">
              </div>
              <div class="username">宠物管理</div>
            </div>
            <div class="account-center-info">
              <a-row :gutter="[24,0]">
                <a-col :span="11" style="padding-left: 0">
                  <p class="mb-0 balance-title">总收益(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.income)}}</p>
                </a-col>
                <a-col :span="1" style="padding: 0">
                  <a-divider style="height:60px;" type="vertical"/>
                </a-col>
                <a-col :span="11" style="padding-right: 0;">
                  <p class="mb-0 balance-title">总订单数</p>
                  <p class="mb-0 balance-value">{{info.orderCount}}</p>
                </a-col>
              </a-row>
            </div>
          </section>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
          style="width:100%"
          :bordered="false"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <WaterLists v-if="noTitleKey==='waterList'" @upload="getDetails()"></WaterLists>
        </a-card>
      </a-col>
    </a-row>
  </section>
</template>
<script>
  import {tableMixins} from '@/utils/mixins'
  import {getPlatformDetail} from '@/api/platform'
  import {cloneDeep} from 'lodash'
  import WaterLists from './page/WaterList'

  export default {
    name: 'ChannelManagementDetails',
    mixins: [tableMixins],
    components: {WaterLists},
    data() {
      return {
        tabListNoTitle: [
          {
            key: 'waterList',
            tab: '流水列表',
          }
        ],
        noTitleKey: 'waterList',
        id: undefined,
        info: undefined,
        allVendors: [],
        labelCol: {span: 4},
        wrapperCol: {span: 19}
      }
    },
    async created() {
      await this.getDetails()
    },
    methods: {
      cloneDeep,
      shielding() {
        this.showModal = true
        this.$nextTick(() => {
          const {allVendors} = this
          let {shieldVendorIds} = this.info
          if (shieldVendorIds) {
            shieldVendorIds = shieldVendorIds.filter(item => allVendors.findIndex(l => l.id === item) >= 0)
            this.info.shieldVendorIds = shieldVendorIds
            this.form.setFieldsValue({shieldVendorIds})
          }
        })
      },
      async getDetails() {
        await getPlatformDetail().then(res => {
          this.info = res
        })
      },
      handleTabChange(key, type) {
        this[type] = key
      }
    }
  }
</script>
<style lang="less" scoped>
  .page-header-wrapper-grid-content-main {
    width: 100%;
    height: 100%;
    min-height: 100%;
    transition: 0.3s;

    .account-center-avatarHolder {
      text-align: center;
      margin-bottom: 24px;

      .left-header-con {
        display: flex;
        justify-content: space-between;
      }

      & > .avatar {
        margin: 0 auto;
        width: 104px;
        height: 104px;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .username {
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        margin-bottom: 4px;
      }
    }
  }

  .account-center-info {
    .balance-title {
      color: #999;
      text-align: center;
    }

    .balance-value {
      font-size: 22px;
      line-height: 44px;
      text-align: center;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .infoTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 24px;
  }

  .enabled-con {
    position: relative;

    .enabled-mack {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
  }
</style>
